<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
	<title>MixDices</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<link rel="stylesheet" type="text/css" href="css/style.css" />
    <link rel="icon" type="image/png" id="favicon" href="images/favicon.png"/>
    <!-- <link rel="apple-touch-icon" href="images/favicon-mobile.png"> -->

	<script type='text/javascript' src='mixdices.js'></script>
	<script type='text/javascript' src='score.js'></script>
	<script type='text/javascript' src='interface.js'></script>
	<script type='text/javascript' src='verifs.js'></script>
    <script src="libs/jquery.min.js"></script>
    <script src="libs/jquery-ui.min.js"></script>		
</head>

<body>
	<div id="game">
	<div id="title">
		MixDices
	</div>

<script>
$("#title").click(function () {
$('#title').fadeTo(400, 0.33);	
$('#title').fadeTo(400, 1);
});
</script>
	
	<div id="rules">
		<p>The goal of this game, is to make the most combinations possible.
Combinations include rows, columns, diagonals, and squares.
To begin with, click on the Play button, and drag and drop dices into the main grid. When you are done, click again on the Play button to get new dices.
Be careful : all current dices will be locked.<br/></p>
	<b>Combinations Cleared From Board :</b><br/><br/>
	<img src='images/yellow_3.png' alt='yellow3' height='50' width='50'>
	<img src='images/yellow_3.png' alt='yellow3' height='50' width='50'>
	<img src='images/yellow_3.png' alt='yellow3' height='50' width='50'>
	<img src='images/yellow_3.png' alt='yellow3' height='50' width='50'>
	<b>400 points</b> Same Color Same Number<br/>
	<img src='images/yellow_1.png' alt='yellow1' height='50' width='50'>
	<img src='images/yellow_2.png' alt='yellow2' height='50' width='50'>
	<img src='images/yellow_3.png' alt='yellow3' height='50' width='50'>
	<img src='images/yellow_4.png' alt='yellow4' height='50' width='50'>
	<b>200 points</b> Same Color Each Number<br/>
	<img src='images/yellow_1.png' alt='yellow1' height='50' width='50'>
	<img src='images/purple_1.png' alt='purple1' height='50' width='50'>
	<img src='images/green_1.png' alt='green1' height='50' width='50'>
	<img src='images/brown_1.png' alt='brown1' height='50' width='50'>
	<b>200 points</b> Each Color Same Number<br/>
	<img src='images/yellow_1.png' alt='yellow1' height='50' width='50'>
	<img src='images/purple_2.png' alt='purple2' height='50' width='50'>
	<img src='images/green_3.png' alt='green3' height='50' width='50'>
	<img src='images/brown_4.png' alt='brown4' height='50' width='50'>
	<b>100 points</b> Each Color Each Number<br/><br/>
	There are other possibles combination that give you points, but do not clear the board. 
	</div>

<div id='gamegrids'>
<form name="gameform">
<div id='stockgrid'>
<img id='box00' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(0,0);" ondragleave="dragleavedice(0,0);" ontouchleave="dragleavedice(0,0);" ondragstart="assign(0,0,false,false);" ontouchstart="assign(0,0,false,false);" ondrop='event.preventDefault(),assign(0,0,null,true)' ontouchend='event.preventDefault(),assign(0,0,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(0,0,false,true);' /> 
<br/>
<img id='box01' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(0,1);" ondragleave="dragleavedice(0,1);" ontouchleave="dragleavedice(0,1);" ondragstart="assign(0,1,false,false);" ontouchstart="assign(0,1,false,false);" ondrop='event.preventDefault(),assign(0,1,null,true)' ontouchend='event.preventDefault(),assign(0,1,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(0,1,false,true);' /> 
<br/>
<img id='box02' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(0,2);" ondragleave="dragleavedice(0,2);" ontouchleave="dragleavedice(0,2);" ondragstart="assign(0,2,false,false);" ontouchstart="assign(0,2,false,false);" ondrop='event.preventDefault(),assign(0,2,null,true)' ontouchend='event.preventDefault(),assign(0,2,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(0,2,false,true);' /> 
<br/>
<img id='box03' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(0,3);" ondragleave="dragleavedice(0,3);" ontouchleave="dragleavedice(0,3);" ondragstart="assign(0,3,false,false);" ontouchstart="assign(0,3,false,false);" ondrop='event.preventDefault(),assign(0,3,null,true)' ontouchend='event.preventDefault(),assign(0,3,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(0,3,false,true);' /> 
</div>

<div id='playgrid'>
<img id='box10' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(1,0);" ondragleave="dragleavedice(1,0);" ontouchleave="dragleavedice(1,0);" ondragstart="assign(1,0,false,false);" ontouchstart="assign(1,0,false,false);" ondrop='event.preventDefault(),assign(1,0,null,true)' ontouchend='event.preventDefault(),assign(1,0,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(1,0,false,true);' />
<img id='box11' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(1,1);" ondragleave="dragleavedice(1,1);" ontouchleave="dragleavedice(1,1);" ondragstart="assign(1,1,false,false);" ontouchstart="assign(1,1,false,false);" ondrop='event.preventDefault(),assign(1,1,null,true)' ontouchend='event.preventDefault(),assign(1,1,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(1,1,false,true);' />
<img id='box12' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(1,2);" ondragleave="dragleavedice(1,2);" ontouchleave="dragleavedice(1,2);" ondragstart="assign(1,2,false,false);" ontouchstart="assign(1,2,false,false);" ondrop='event.preventDefault(),assign(1,2,null,true)' ontouchend='event.preventDefault(),assign(1,2,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(1,2,false,true);' />
<img id='box13' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(1,3);" ondragleave="dragleavedice(1,3);" ontouchleave="dragleavedice(1,3);" ondragstart="assign(1,3,false,false);" ontouchstart="assign(1,3,false,false);" ondrop='event.preventDefault(),assign(1,3,null,true)' ontouchend='event.preventDefault(),assign(1,3,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(1,3,false,true);' />
<br/>

<img id='box20' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(2,0);" ondragleave="dragleavedice(2,0);" ontouchleave="dragleavedice(2,0);" ondragstart="assign(2,0,false,false);" ontouchstart="assign(2,0,false,false);" ondrop='event.preventDefault(),assign(2,0,null,true)' ontouchend='event.preventDefault(),assign(2,0,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(2,0,false,true);' />
<img id='box21' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(2,1);" ondragleave="dragleavedice(2,1);" ontouchleave="dragleavedice(2,1);" ondragstart="assign(2,1,false,false);" ontouchstart="assign(2,1,false,false);" ondrop='event.preventDefault(),assign(2,1,null,true)' ontouchend='event.preventDefault(),assign(2,1,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(2,1,false,true);' />
<img id='box22' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(2,2);" ondragleave="dragleavedice(2,2);" ontouchleave="dragleavedice(2,2);" ondragstart="assign(2,2,false,false);" ontouchstart="assign(2,2,false,false);" ondrop='event.preventDefault(),assign(2,2,null,true)' ontouchend='event.preventDefault(),assign(2,2,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(2,2,false,true);' />
<img id='box23' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(2,3);" ondragleave="dragleavedice(2,3);" ontouchleave="dragleavedice(2,3);" ondragstart="assign(2,3,false,false);" ontouchstart="assign(2,3,false,false);" ondrop='event.preventDefault(),assign(2,3,null,true)' ontouchend='event.preventDefault(),assign(2,3,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(2,3,false,true);' />
<br/>

<img id='box30' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(3,0);" ondragleave="dragleavedice(3,0);" ontouchleave="dragleavedice(3,0);" ondragstart="assign(3,0,false,false);" ontouchstart="assign(3,0,false,false);" ondrop='event.preventDefault(),assign(3,0,null,true)' ontouchend='event.preventDefault(),assign(3,0,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(3,0,false,true);' />
<img id='box31' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(3,1);" ondragleave="dragleavedice(3,1);" ontouchleave="dragleavedice(3,1);" ondragstart="assign(3,1,false,false);" ontouchstart="assign(3,1,false,false);" ondrop='event.preventDefault(),assign(3,1,null,true)' ontouchend='event.preventDefault(),assign(3,1,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(3,1,false,true);' />
<img id='box32' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(3,2);" ondragleave="dragleavedice(3,2);" ontouchleave="dragleavedice(3,2);" ondragstart="assign(3,2,false,false);" ontouchstart="assign(3,2,false,false);" ondrop='event.preventDefault(),assign(3,2,null,true)' ontouchend='event.preventDefault(),assign(3,2,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(3,2,false,true);' />
<img id='box33' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(3,3);" ondragleave="dragleavedice(3,3);" ontouchleave="dragleavedice(3,3);" ondragstart="assign(3,3,false,false);" ontouchstart="assign(3,3,false,false);" ondrop='event.preventDefault(),assign(3,3,null,true)' ontouchend='event.preventDefault(),assign(3,3,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(3,3,false,true);' />
<br/>

<img id='box40' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(4,0);" ondragleave="dragleavedice(4,0);" ontouchleave="dragleavedice(4,0);" ondragstart="assign(4,0,false,false);" ontouchstart="assign(4,0,false,false);" ondrop='event.preventDefault(),assign(4,0,null,true)' ontouchend='event.preventDefault(),assign(4,0,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(4,0,false,true);' />
<img id='box41' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(4,1);" ondragleave="dragleavedice(4,1);" ontouchleave="dragleavedice(4,1);" ondragstart="assign(4,1,false,false);" ontouchstart="assign(4,1,false,false);" ondrop='event.preventDefault(),assign(4,1,null,true)' ontouchend='event.preventDefault(),assign(4,1,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(4,1,false,true);' />
<img id='box42' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(4,2);" ondragleave="dragleavedice(4,2);" ontouchleave="dragleavedice(4,2);" ondragstart="assign(4,2,false,false);" ontouchstart="assign(4,2,false,false);" ondrop='event.preventDefault(),assign(4,2,null,true)' ontouchend='event.preventDefault(),assign(4,2,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(4,2,false,true);' />
<img id='box43' class='dice' ondragover="event.preventDefault()" ondragenter="dragenterdice(4,3);" ondragleave="dragleavedice(4,3);" ontouchleave="dragleavedice(4,3);" ondragstart="assign(4,3,false,false);" ontouchstart="assign(4,3,false,false);" ondrop='event.preventDefault(),assign(4,3,null,true)' ontouchend='event.preventDefault(),assign(4,3,null,true)' src='images/dice_empty.png' draggable="true" onClick='assign(4,3,false,true);' />
</div>
</form>
</div>

	<div id='ui'>
		Score : <input id='score' type='text' value='' style='text-align: center;' readonly />
		<input type='button' value='Play'   onClick='startgame();' />
		<input id='rulesinput' type='button' value='Show rules' onClick='showrules();' />
		<img id='volume' src='images/vol-on.png' title='Volume' onClick='soundactivate();' />
	</div>
	<br/>
<div id='footer'>
developped by <a href="http://twitter.com/GeekShadow">@GeekShadow</a><br/>
©2011 Antoine Turmel<br/><br/>
</div>
</div>
</body>
</html>
